<template>
    <div>
      <div style="height: 160px">
        <el-container style="width: 400px;float: left" class="userHead">
          <div class="headPhoto" style="width: 150px;height: 150px;float: left">
            <el-avatar :size="150" :src="user.photo"></el-avatar>
          </div>
          <div style="width: 300px;height:150px;float:left">
            <br>
            <h2>{{user.username}}</h2>
            <el-link>修改个人信息></el-link>
          </div>
        </el-container>
        <el-container style="width: 400px;float: left" class="userMessage">
          <div class="userLever">
            <h2>用户等级：{{userLevel}}</h2>
            <h2>绑定手机：{{user.tel}}</h2>
            <h2>绑定邮箱：{{user.email}}</h2>
          </div>
        </el-container>
      </div>
      <div style="float: left;width: 810px">
        <hr>
      </div>
      <div class="handle">
        <div style="width: 400px;float: left">
          <div class="headPhoto" style="width: 150px;height: 150px;float: left">
            <el-avatar :size="100" :src="photo1"></el-avatar>
          </div>
          <div style="width: 250px;height:150px;float:left">
            <br>
            <h2>待支付订单：{{notPayNum}}</h2>
            <router-link to="/UserNotPayOrders" style="text-decoration: none">查看待支付订单></router-link>
          </div>
        </div>
        <div style="width: 400px;float: left">
          <div class="headPhoto" style="width: 150px;height: 150px;float: left">
            <el-avatar :size="100" :src="photo2"></el-avatar>
          </div>
          <div style="width: 250px;height:150px;float:left">
            <br>
            <h2>待处理订单：{{notManageNum}}</h2>
            <router-link to="/UserNotManageOrders" style="text-decoration: none">查看待处理订单></router-link>
          </div>
        </div>
        <!--<div style="width: 400px;float: left">
          <div class="headPhoto" style="width: 150px;height: 150px;float: left">
            <el-avatar :size="100" :src="photo3"></el-avatar>
          </div>
          <div style="width: 250px;height:150px;float:left">
            <br>
            <h2>待评价订单：{{notEvaluationNum}}</h2>
            <router-link to="/UserNotEvaluationPage" style="text-decoration: none">查看待评价订单></router-link>
          </div>
        </div>-->
        <div style="width: 400px;float: left">
          <div class="headPhoto" style="width: 150px;height: 150px;float: left">
            <el-avatar :size="100" :src="photo4"></el-avatar>
          </div>
          <div style="width: 250px;height:150px;float:left">
            <br>
            <h2>已完成订单：{{finishNum}}</h2>
            <router-link to="/UserFinishOrders" style="text-decoration: none">查看已完成订单></router-link>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import axios from 'axios';
    export default {
        name: "UserMessage",
        data() {
          return {
            notPayNum: '',
            notManageNum: '',
            notEvaluationNum: '',
            userLevel: '',
            finishNum: '',
            titleMessage: '这是用户信息页面',
            circleUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590384137669&di=c6310c7651da7778a1a467ffcd9a4523&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F16%2F12%2F01300535031999137270128786964.jpg",
            user:{
              username: '',
              did: '',
              tel: '',
              email: '',
              photo: ''
            },
            photo1: 'https://s01.mifile.cn/i/user/portal-icon-1.png',
            photo2: 'https://s01.mifile.cn/i/user/portal-icon-2.png',
            photo3: 'https://s01.mifile.cn/i/user/portal-icon-3.png',
            photo4: 'https://s01.mifile.cn/i/user/portal-icon-4.png',
          }
        },
        methods:{
          getnotPayNum(){

            this.$router.push('/UserNotPayOrders')
          },
          getnotManageNum(){
            this.$router.push('/UserFinishOrders')
          },
          getnotEvaluationNum(){
            this.$router.push('/UserNotEvaluationPage')
          },
          getfinishNum(){
            this.$router.push('/UserNotManageOrders')
          },
          getUserMessage(){
            var _this = this;
            axios.get('/api/user/getUserMessage').then(function (res) {
              _this.user = res.data
              if (_this.user.did == 1){
                _this.userLevel = '普通用户'
              } else if (_this.user.did == 2) {
                _this.userLevel = 'VIP'
              } else if (_this.user.did == 3) {
                _this.userLevel = 'SVIP'
              }
            })
          }
        },
        mounted() {
          this.getUserMessage()

        }

    }
</script>

<style scoped>

</style>
